<template>
  <div id="scroll-board" style="color: #FFF;">
    <div class="card-item" >
        <div class="card-header">
          <div class="card-header-left">用水量占比</div>
        </div>
        <div style="width:100%; height:330px;">
          <div id="water1" class="five"></div>
        </div>
      </div>
  </div>
</template>
 
<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';
export default {
  name: 'IndexMiddle',
  data () {
    return {
      chart1: null,
    }
  },
  methods: {
    getbing(){
        if(this.chart1 != null && this.chart1 != '' && this.chart1 != undefined){
          this.chart1.dispose();
        }
        var chartDom = document.getElementById('water1');
        this.chart1 = echarts.init(chartDom);
        var option;
        option = {
          title: {},
          tooltip: {},
          legend: {data: ['自来水','中水']},
          toolbox: {padding: [0,15,0,0]},
          label: {show: false},
          labelLine: {show: false},
          series: [
            {
              name: '水耗用',
              data: [{name: '自来水', value: 39821},
                    {name: '中水', value: 16547}],
              type: 'pie'
            }
          ],
        };
        option && this.chart1.setOption(option,true);
      },
  },
  mounted(){
      setTimeout(() => {
        this.getbing();
      }, 900)
    },
}
</script>
 
<style lang="less">

.five {
  width: 100%;
  height: 100%;
}
</style>